<!--
 * @Date: 2023-10-12 15:20:41
 * @Description: 库存审计
 * @LastEditors: hujingyang
 * @Author: hujingyang
 * @FilePath: \xunku_official_website\src\pages\Audit\auditPage.vue
 * @IDE: Created by VScode.
-->
<template>
  <div>
    <BannerComponent
      :banner="banner"
      gradientColorStart="#f8cf8d"
      gradientColorEnd="#f2a32a"
      aria-label="头部banner图"
    />

    <LittleTitleComponent
      primaryTitle="核心内容"
      secondTitle="THE CORE"
      aria-label="模块标题"
      style="height: 100px"
    />

    <div class="core-cards">
      <div v-for="(item, index) in coreCards" :key="index" class="card-item">
        <img :src="item.icon" alt="卡片图标" class="item-icon" />
        <div class="item-title">{{ item.title }}</div>
        <div class="item-divide"></div>
        <div class="item-describe">{{ item.describe }}</div>
      </div>
    </div>

    <LittleTitleComponent
      primaryTitle="一网二网全覆盖巡库服务"
      secondTitle="FULL COVERAGE WAREHOUSE INSPECTION SERVICE"
      aria-label="模块标题"
      style="height: 120px"
    />

    <BannerComponent
      banner="https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/content_2%40961x401.png"
      gradientColorStart="#fff"
      gradientColorEnd="#fff"
      aria-label="中部banner图"
      :height="401"
    />

    <div class="business-model">
      <LittleTitleComponent
        primaryTitle="业务模式"
        secondTitle="BUSINESS MODEL"
        aria-label="模块标题"
        style="height: 120px"
      />

      <div class="business-model-content">
        <div
          v-for="(item, index) in businessModelCards"
          :key="index"
          class="content-card"
          :class="{ 'content-large-card': item.childrenItems }"
        >
          <div class="card-item">
            <img class="item-image" :src="item.image" alt="卡片图标" />
            <div class="item-title">{{ item.title }}</div>
            <div class="item-describe">{{ item.describe }}</div>

            <div v-if="item.childrenItems" class="item-children-content">
              <div
                v-for="(ele, o) in item.childrenItems"
                :key="o"
                class="item-children-item"
              >
                <img class="item-icon" :src="ele.icon" alt="卡片图标" />
                <span class="item-text">{{ ele.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const state = reactive({
      // 首页顶部图
      banner:
        "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/banner_2%40960x231.png",
      coreCards: [
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/core_icon_1%4039x39.png",
          title: "抵/质押物检查",
          describe:
            "对抵(质)押车辆的权属、质量、数量、品牌型号、留存形态、存放的二网、二库等相关要素进行检查以及相对应合格证、钥匙的核查",
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/core_icon_2%4039x39.png",
          title: "监管方履责情况",
          describe:
            "对监管方进行现场检查，重点检查仓储监管条件、监管方是否按照约定的监管要求对货押融资授信客户的抵 (质)押物实施监管",
        },
        {
          icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/core_icon_3%4039x39.png",
          title: "经销商经营情况",
          describe: "对经销商的日常经营情况进行了解",
        },
      ],
      businessModelCards: [
        {
          image:
            "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/image_icon_1%40295x130.png",
          title: "线上服务",
          describe: "二网实时查库系统，大数据分析，预警机制",
        },
        {
          image:
            "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/image_icon_2%40295x130.png",
          title: "线下服务",
          describe: "按计划执行实地巡库，异常汇报，应急处理",
        },
        {
          image:
            "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/image_icon_3%40295x130.png",
          title: "融合线上、线下资源 1+1>2",
          describe:
            "线上、线下人员整合，数据整合，管理体系整合，远程大数据分析与现场人员充分配合，实现日常巡库智能化、巡库覆盖本地化、数据分享实时化、风险预警系统化、应急处理及时化、后续跟进针对化、",
          childrenItems: [
            {
              icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/icon_1%4055x500.png",
              title: "日常巡库智能化",
            },
            {
              icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/icon_2%4055x500.png",
              title: "巡库覆盖本地化",
            },
            {
              icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/icon_3%4055x500.png",
              title: "数据分享实时化",
            },
            {
              icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/icon_4%4055x500.png",
              title: "风险预警系统化",
            },
            {
              icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/icon_5%4055x500.png",
              title: "应急处理及时化",
            },
            {
              icon: "https://hjy-test09.oss-cn-beijing.aliyuncs.com/20231012%E5%B7%A1%E5%BA%93%E5%AE%98%E7%BD%91/02.Audit/icon_6%4055x500.png",
              title: "后续跟进针对化",
            },
          ],
        },
      ],
    });

    function test() {
      console.log("test");
    }
    return {
      ...toRefs(state),
      test,
    };
  },
};
</script>

<style scoped lang="scss">
.core-cards {
  width: 600px;
  height: 200px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  .card-item {
    width: calc(193px - 16px * 2);
    height: calc(195px - 16px * 2);
    color: #fff;
    border-radius: 6px;
    background-image: -webkit-linear-gradient(-45deg, #fcc64b, #f7785f);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;

    &:hover {
      box-shadow: 0 4px 16px 0 rgba(209, 220, 232, 0.63);
    }
    .item-icon {
      width: 39px;
      height: 39px;
    }

    .item-title {
      font-size: 15px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 25px;
    }
    .item-divide {
      width: 38px;
      height: 4px;
      background: #ffffff;
      border-radius: 28px 28px 28px 28px;
    }

    .item-describe {
      font-size: 10px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 13px;
      height: 52px;
    }
  }
}

.business-model {
  width: 100%;
  height: 1063px;
  background: -webkit-linear-gradient(#fff 1%, #f2f8fe, #f2f8fe, #f2f8fe);
  .business-model-content {
    height: 844px;
    width: 600px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    .content-card {
      width: 295px;
      height: 276px;
      background: #ffffff;
      border-radius: 5px 5px 5px 5px;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        box-shadow: 0 4px 16px 0 rgba(209, 220, 232, 0.63);
      }

      .card-item {
        height: calc(100% - 46px - 46px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .item-title {
          font-size: 15px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #3066ab;
          line-height: 14px;
        }

        .item-describe {
          font-size: 11px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #888888;
          line-height: 14px;
        }
      }
    }

    .content-large-card {
      width: 600px;
      height: 541px;
      background: #ffffff;
      border-radius: 5px 5px 5px 5px;

      .item-image {
        margin: 0 auto;
      }

      .item-describe {
        width: 436px;
        margin: 0 auto;
      }
      &:hover {
        box-shadow: 0 4px 16px 0 rgba(209, 220, 232, 0.63);
      }

      .item-children-content {
        height: 170px;
        width: 436px;
        display: flex;
        flex-wrap: wrap;

        .item-children-item {
          display: grid;
          width: 140px;
          align-items: center;
          justify-content: center;
          height: 77px;
          .item-icon {
            width: 55px;
            height: 55px;
            margin: 0 auto;
          }

          .item-text {
            font-size: 11px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #2f2f2f;
            line-height: 14px;
          }
        }
      }
    }
  }
}
</style>
